<template>
	<div class="col-md-8 col-md-offset-2 forget-password-bg">
		<div class="panel panel-info">
			<div class="panel-heading">重置密码</div> 
			<div class="panel-body">
				<form method="POST" action="#" class="form-horizontal">
					<div class="form-group">
						<label for="email" class="col-md-4 control-label">邮箱地址</label>
						<div class="col-md-6">
							<input type="email" ref="email" name="email" v-model="email" required="required" class="form-control">
						</div>
					</div> 
					<div class="form-group">
						<div class="col-md-6 col-md-offset-4">
							<button type="button" class="btn btn-primary" @click="sendEmail" :disabled="!isEmail()">
                                发送密码重置链接
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
	</div>
</template>

<script>
	import {checkEmail} from 'common/check'
    import {setTitle} from 'common/dom'

	export default {
		data() {
			return {
				email: ''
			}
		},
		created() {
            setTitle(this.$title.forget)
		},
		methods: {
			sendEmail() {
				if(this.email == '' || !checkEmail(this.email)){
					this.$refs.email.focus()
					this.$message('请输入正确的邮箱地址')
				}
				this.$http.post('sendResetMail',{email:this.email}).then((response)=>{
					this.email = ""
					this.$message('重置邮件已发送，请登录邮箱查看');
				}).catch((error) =>{
				    if (error.response) {
				    	console.log(error.response);
				    	if(error.response.status == 422){
							this.$message('没有找到匹配账号，请确认邮箱是否正确');
				    	}
				    }else{
						this.$message('服务器罢工啦~帮忙联系站长..谢啦')
				    }
				})
			},
			isEmail() {
				return this.email && checkEmail(this.email)
			}
		}
	}
</script>

<style lang="scss" scope>
	.forget-password-bg {
		margin-top: 35px;
	}
</style>